<template>
    <div class="app">
        <div class="content">
            <div v-if='isShow' v-loading="loading" class="content_MV">
                <section>
                    <video autoplay controls width="100%" height="664" :src="src" id="videoElement"></video>

                </section>
            </div>
            <div class="btn_bottom">
                <el-form ref="form" :rules="rules" :model="sizeForm" label-width="150px" size="mini">
                    <el-form-item class="content_input" label="请输入您的密钥：" prop="one">
                        <el-input v-model="sizeForm.one" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item class="content_input" label="rtmp推流地址：" prop="tow">
                        <el-input v-model="sizeForm.tow" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                            :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                            <el-button size="small" type="primary">请选择视频文件夹</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form')">开启直播</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import flvjs from 'flv.js/dist/flv.min.js'
export default {
    name: 'indexMV',
    data() {
        return {
            sizeForm: {
                one: "",
                tow: "",
                three: "",
                four: ""
            },
            isShow: 0,
            fileList: [],
            src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TLaf2cc9d469939803949187b46da16c45.flv',
            loading: false,
            rules: {
                one: [
                    { required: true, message: '请输入您的密钥', trigger: 'blur' },
                ],
                tow: [
                    { required: true, message: '请输入rtmp推流地址', trigger: 'blur' },
                ]
            }
        }
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.createVideo();
        });
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.sizeForm);
                    this.loading = true
                    this.isShow = 1
                    setTimeout(() => {
                        this.loading = false
                    }, 1000)
                    this.sizeForm = {}

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        createVideo() {
            if (flvjs.isSupported()) {
                // var videoElement = document.getElementById('videoElement')
                // var flvPlayer = flvjs.createPlayer({
                //     type: 'flv',
                //     url: this.src
                // })
                // flvPlayer.attachMediaElement(videoElement)
                // flvPlayer.load()
                // flvPlayer.play()
            }
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.app {
    height: 100vh;
    background-color: #ccc;

    .content {
        padding-top: 100px;

        .content_MV {
            margin: 0 auto;
            background-color: #fff;
            width: 60%;
            min-height: 50vh;
        }

        .btn_bottom {
            padding: 10px 0;
            margin: 0 auto;
            background-color: #fff;
            width: 60%;
            min-height: 100px;
            border-top: 1px solid #000;
            display: flex;
            align-items: center;
        }
    }
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    display: inline-block;
}
</style>
